<template>
	<view class="container">

		<view class="userAmount">
			<view class="accountName">
				<!-- 账户余额 -->
				<view>总资产(USDT)</view>
				<svg-load :name="showicon" class="yanjin" @click="changeBalanceIsShow"></svg-load>
				<!-- <svg-load name="refresh" class="yanjin" @click="handleShuaxin"></svg-load> -->
			</view>
			<view class="userInfo fw-num">{{ showBalance? (isFreeze && isFreeze[-1] && isFreeze[-1].totalValue ? isFreeze[-1].totalValue.toFixed(4) : 0) : '******' }}
			</view>
			<text style="color: #999;margin-top:15px" v-if="showBalance">
				≈￥{{ (isFreeze && isFreeze[-1] && isFreeze[-1].totalValue ? isFreeze[-1].totalValue.toFixed(4) : 0) * (defiActivityTypeList || 1)}}
			</text>
			<text style="color: #999;margin-top:15px" v-else>******</text>
		</view>
		<view class="currencyAbout">
			<view v-for="(item, index) in currencyAbout.filter((items) => {
        return items.isShow
      })" :key="index" @click="toRecharge(item.url)">
				<!-- <svg-load :name="item.icon" class="currencyIcon"></svg-load> -->
				<view class="btn">{{ item.title }}</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		dispatchCustomEvent
	} from '@/utils'
	import {
		_t18,
		_toView
	} from '@/utils/public'
	import {
		DIFF_RECHARGE_COSTORM
	} from '@/config/index'
	import {
		getgetAccount
	} from "@/api/user";
	import {
		onMounted
	} from "vue";
	import {
		useUserStore
	} from "@/store/user";
	import {
		dict
	} from "@/api/common";

	const userStore = useUserStore()
	const isFreeze = userStore.userInfo.appAssetReview
	const props = defineProps({
		data: {
			type: Object
		},
		amount: {
			type: String
		},
		coin: {
			type: String,
			default: 'USDT'
		},
		type: {
			type: String
		},

	})
	const showicon = ref('yanjin-k')
	const defiActivityTypeList = ref()
	const getDefiActivityType = async () => {
		const res = await dict('sys_huilv')
		// console.log("res", res)
		if (res.code == 200) {
			// console.log('data', res.data)
			defiActivityTypeList.value = res.data[0].dictValue
			// console.log("value", defiActivityTypeList.value)
		}
	}
	const emit = defineEmits(['handleYanjin', 'handleShuaxin'])
	const handleYanjin = () => {
		emit('handleYanjin')
	}
	const handleShuaxin = () => {
		emit('handleShuaxin')
	}

	const currencyAbout = computed(() => {

		return [{
				icon: 'chongbi',
				title: _t18('asset_recharge', ['aams']),
				url: '/recharge',
				isShow: true
			}, //充币 //杠杆

		]
	})
	const showBalance = ref(true)
	const changeBalanceIsShow = () => {

		showBalance.value = !showBalance.value
		showicon.value = showBalance.value ? 'yanjin-k' : 'yanjin-g'
	}
	const AccountList = ref()
	// 获取冻结资产
	const getAccountFreezeList = async () => {
		// 检查用户是否已登录
		if (!userStore.isSign) {
			console.log('用户未登录，跳过获取账户信息')
			return
		}
		
		try {
			const res = await getgetAccount()
			if (res.code == '200') {
				AccountList.value = res.data
			}
		} catch (error) {
			console.error('获取账户信息失败:', error)
		}
	}
	onMounted(() => {
		// 只有在用户已登录时才获取账户信息
		if (userStore.isSign) {
			getAccountFreezeList()
		}
		getDefiActivityType()
		// console.log("value", defiActivityTypeList.value)
	})
	/**
	 * 点击快捷充币
	 */
	const toRecharge = (url) => {
		if (DIFF_RECHARGE_COSTORM.includes(__config._APP_ENV) && url == '/recharge') {
			dispatchCustomEvent('event_serviceChange')
		} else {
			_toView(url)
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		// flex-direction: column;
		align-items: center;
		height: 130px;
		font-size: 14px;
		color: var(--ex-default-font-color);



		.userAmount {
			// margin-top: 61px;
			padding: 30px 15px 20px 15px;
			// border-bottom: 1px solid var(--ex-border-color);
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			width: 60%;
			flex: 1;


			.fw-num {
				display: block;
				font-size: 30px;
				// color: var(--ex-passive-font-color);
			}

			.accountName {
				display: flex;
				align-items: center;
				height: 45px;
				line-height: 45px;
				justify-content: flex-start;
				color: var(--ex-passive-font-color) !important;

				.yanjin {
					font-size: 14px;
					margin-left: 15px;
					margin-right: 15px;
				}

				.shuaxin {
					font-size: 12px;
				}


			}

		}

		.currencyAbout {


			text-align: center;
			display: flex;
			width: 40%;
			height: 100%;
			justify-content: center;
			align-items: center;


			// padding: 5px 10px;


			.btn {
				display: block;
				margin-top: 15px;
				padding: 10px 30px;
				border-radius: 10px;
				background-color: var(--ex-home-box-background-color);
				color: var(--ex-home-list-bgcolor);
			}
		}



	}
</style>